<template>
	<view class="main-content">
		<u-form :model="form" id="form-container">
			<u-form-item label="工段编号" label-width=150>
				<u-input v-model="form.sectionNo" placeholder="请输入工段编号" border clearable></u-input>
			</u-form-item>
			<u-form-item class="checkBtn">
				<u-button type="success" size="medium" @click="getprocess1scan">查询</u-button>
			</u-form-item>
		</u-form>
		
		
		<u-empty mode="data" :margin-top="400" :show="noData"></u-empty>
		<view class="table-content">
			<view class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in records" :key="index">
				<view class="el-process">
					<view class="list-con">
						<view class="list-item">
							<view>条码</view>
							<view>{{item.deviceBarcode}}</view>
						</view>
						<view class="list-item">
							<view>排产序号</view>
							<view>{{item.planNo}}</view>
						</view>
						<view class="list-item">
							<view>扫码时间</view>
							<view>{{item.scanTime}}</view>
						</view>
						<view class="list-item">
							<view>工位编号</view>
							<view>{{item.sopBarcode}}</view>
						</view>
						<view class="list-item">
							<view>员工工号</view>
							<view>{{item.jobNumber}}</view>
						</view>
						<view class="flex u-row-center">
							<u-button size="medium" type="warning" @click="deleteprocess1scan(item,index)">删除</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-no-network></u-no-network>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { selDeviceBarcode,delDeviceBarcode } from '../../utils/index.js'
	export default {
		data () {
			return {
				records: [],			//工序1扫过的码
				noData: false,
				status: 'loadmore',
				customStyle: {
					color: '#38adff'  // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				},
				form: {
					sectionNo: ''			//产品编号
				},
			}
		},
		methods:{
			async getprocess1scan(){
				this.status = 'loading'
				const query = Object.assign({},this.form)
				const {data} = await selDeviceBarcode(query)
				const errMsg = data.msg
				if(data.code == '1') {
					this.records = data.data
					if(!data.data.length){
						this.noData = true
					} else {
						this.noData = false
					}
					console.log('records',data.data)
					this.status = 'loadmore'
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			async deleteprocess1scan(item,index) {
				let obj = {
					planNo: item.planNo,
					deviceBarcode: item.deviceBarcode
				}
				const {data} = await delDeviceBarcode(obj)
				const errMsg = data.msg
				if(data.code == '1'){
					this.records.splice(index,1)
					this.$refs.uTips.show({
						title: errMsg,
						type: 'success',
						duration: '2000'
					})
				}else{
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			}
		},
		// 在进入页面时就从后台请求获取排产信息和工段
		onLoad() {
		},
		// 下拉刷新,即调用查询按钮绑定的函数
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>

<style lang="scss" scoped>
	
	.page-font {
		font-size: 32rpx;
		justify-content: center;
		margin-top: 20rpx;
	}
	.main-content {
		width: 100%;
		height: 100%;
		align-items: center;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 5rpx;
		padding: 5rpx 0rpx;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		margin: 30rpx;
		background-color: #FFEFD5;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 10rpx 10rpx;
	}
	.el-process{
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.list-con{
		flex: 1;
	}
	.table-content{
		padding-bottom: env(safe-area-inset-bottom);
		margin-bottom: 60rpx;
	}
	.inputTips{
		font-size: 18rpx;
		color: #F56C6C;
	}
	// 查询按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
	}
</style>